import { FC, memo, MemoExoticComponent } from "react";
import { createRoot, Root } from "react-dom/client";

interface Loading extends MemoExoticComponent<FC> {
  show?: (text: "数据加载中...") => void;
  remove?: () => void;
  wrapperRoot?: Root;
}

// eslint-disable-next-line react/display-name
const Loading: any = memo((props: { text: string }) => {
  return (
    <div className="dv-loading">
      <div className="app-loading-wrap">
        <div className="app-loading-dots">
          <span className="dot dot-spin">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </span>
        </div>
      </div>
      <div className="loading-tip">{props.text}</div>
    </div>
  );
});

Loading.show = function (text: string) {
  this.wrapperRoot?.unmount(); //清除之前打开的Loading
  const oWrapper = document.createElement("div");
  oWrapper.setAttribute("id", "loading_dialog");
  document.body.appendChild(oWrapper);
  this.wrapperRoot = createRoot(oWrapper);
  this.wrapperRoot.render(<Loading text={text ? text : "数据加载中..."} />);
};

Loading.remove = function () {
  this.wrapperRoot?.unmount();
};

export default Loading;
